<template>
    <div class="content">
        <div class="fake-parent table-header">
            <div>ID</div>
            <div>assignee</div>
            <div>task details</div>
            <div>paymnet method</div>
            <div>payment status</div>
            <div>amunt</div>
        </div>
        <div class="fake-parent content-line">
            <div>#320</div>
            <div>Mark C.Diaz</div>
            <div>Support of thteme</div>
            <div>Credit Card</div>
            <div class="icon">
                <div>approved</div>
            </div>
            <div>$123,123</div>
        </div>
        <div class="grid-bg">
        </div>
    </div>
</template>
<style scoped lang="less">
@border-radius: 15px;

.content {
    height: 600px;
    width: 1000px;
    display: grid;
    background-color: aliceblue;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
    justify-items: start;
    align-items: center;
    position: relative;
    z-index: 0;
    border: 1px solid gray;
    box-sizing: border-box;
    border-radius: @border-radius;

    .fake-parent {
        display: contents;

        &>div:first-child {
            padding-left: 30px;
        }

        .icon>div {
            padding: 5px;
            background-color: aqua;
            border-radius: 10px;
        }
    }

    .content-line>div {
        width: 100%;
        height: 100%;
        display: flex;
        border-bottom: 1px solid black;
        align-items: center;
    }

    .table-header {
        text-transform: capitalize;
        font-size: 0.8rem;
        font-weight: 800;

    }

    .grid-bg {
        border-top-left-radius: @border-radius;
        border-top-right-radius: @border-radius;

        grid-row: 1/2;
        grid-column: 1/7;
        background-color: rgb(184, 227, 252);
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: -1;
        border-bottom: 1px solid gray;
        box-sizing: border-box;
    }
}
</style>